<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <div id="app">
      <div>{{ message }}</div> <!-- mustache -->
      <div>{{ message }} --- {{ information }}</div> <!-- mustache --- grammar -->
      <div>{{ message + ' --- ' + information }}</div> <!-- mustache --- grammar -->
      <div>{{ message + information }}</div> <!-- mustachegrammar -->
      
      <!-- 以文本形式渲染 -->
      <div>{{ html }}</div> <!-- <span style="color: red">red</span> -->
      
      <!-- 支持单一表达式(能求得结果)，变量声明、if语句和for循环等不支持 -->
      <div>{{ number * 10 }}</div> <!-- 20 -->
      <div>{{ isOk ? 'OK' : 'NO' }}</div> <!-- OK -->
      <div>{{ message.split('a') }}</div> <!-- [ "must", "che" ] -->
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp({
      data() {
        return {
          // 试着修改以下属性值，看看HTML中的变化
          message: 'mustache',
          information: 'grammar',
          html: '<span style="color: red">red</span>',
          number: 2,
          isOk: true,
        };
      }
    }).mount('#app');
  </script>
</html>